import React, { Component } from "react";
import { InputItem, Button, Toast } from "antd-mobile";
import { Register } from "../../http/api";
import Header from "../../components/Header";
export default class register extends Component {
    constructor() {
        super()
        // 初始值
        this.state = {
            user: {
                phone: "",
                password: "",
                nickname: ""
            }
        }
    }
    // 修改user
    changeUser(val, key) {
        this.setState({
            user: {
                ...this.state.user,
                [key]: val
            }
        })
    }
    // 点击注册
    register() {
        Register(this.state.user).then(res => {
            if (res.data.code === 200) {
                Toast.info(res.data.msg, 1)
                this.props.history.push("/login")
            }
        })
    }
    render() {
        return (
            <div>
                <Header title="注册" back></Header>
                <InputItem
                    clear
                    placeholder="请输入手机号"
                    onChange={(val) => this.changeUser(val, "phone")}
                >
                    手机号
                </InputItem>
                <InputItem
                    clear
                    placeholder="用户昵称"
                    onChange={(val) => this.changeUser(val, "nickname")}
                >
                    昵称
                </InputItem>
                <InputItem
                    clear
                    placeholder="用户密码"
                    onChange={(val) => this.changeUser(val, "password")}
                >
                    密码
                </InputItem>
                <div style={{ width: "33.33%", margin: "10px auto" }}>
                    <Button type="primary" onClick={() => this.register()}>注册</Button>
                </div>

            </div>
        );
    }
}
